<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title>首页内容页</title>
		<link rel="import" href="header.html" id="page1">
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.mui-bar .mui-pull-left .mui-icon {
				padding-right: 5px;
				font-size: 28px;
			}
			
			.mui-bar .mui-btn {
				font-weight: normal;
				font-size: 17px;
			}
			
			.mui-bar .mui-btn-link {
				top: 1px;
			}
			
			.mui-content img {
				width: 100%;
			}
			
			.hm-description {
				margin: 15px;
			}
			
			.hm-description>li {
				font-size: 14px;
				color: #8f8f94;
			}
			
			
			
			/* 自定义 */
			.block_one{
				background: #2dbb55;
				border-radius: 10px;
				margin: 10px 10px;
				padding: 15px;
				font-size: 15px;
				color:#fff;
			}
			
			.block_common{
				background: #fff;
				border-radius: 10px;
				margin: 5px 10px;
				padding: 20px 10px;
				font-size: 15px;
			}
		
			.width_beyond{
				white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
			}
			
			.green_color{
				color:#2dbb55
			}
			
			.gray_color{
				color:#848181
			}
			
			.icon_position{
				right: -15px;
				bottom: 25px;
				position: absolute;
			}
			
			.slide_height{
				/* height: 270px; */
				height: 37vh;
			}
			
			.weather_div{
				background: rgba(51, 51, 51, 0.8)!important;
				height: 25px;
				line-height: 25px;
				font-size: 12px;
				padding-left: 10px;
				position: absolute;
				width: 220px;
				z-index: 10;
				left: 15px;
				top: 42px;
				border-radius: 8px;
				color: #fff;
			}
		</style>
	</head>
	<body>
	<!-- 	<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">标题</h1>
		</header> -->
		<div id="app" class="mui-content" v-cloak>
			<!-- 天气预报 -->
			<div class="weather_div">
				<img src="../images/index/sunshine.png" style="width:13px;vertical-align: -2px;">
				晴 26.0-26.0℃，风速<3级，空气良
			</div>
			<!--轮播图片-->
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/yuantiao.jpg" class="slide_height">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/index/slider1.png"  class="slide_height">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="../images/yuantiao.jpg"  class="slide_height">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="../images/index/slider1.png"  class="slide_height">
						</a>
					</div>
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			
			<div>
				<div class="block_one">
					<image src="../images/index/warning_info.png" style="width:85px;vertical-align: -1.5px;">
					<span style="border:0.1px solid #fff;height: 50px;margin: 5px;"></span>
					<span v-if="warningRecordList.length==0">暂无告警</span>
					<span v-else>{{warningRecordList[0].tkName +" "+warningRecordList[0].warningText}}</span>
				</div>
				
				<div class="block_common" style="display: flex;padding: 25px 10px;">
					<div style="flex: 1;text-align: center;" @click="defOpenWindow('indexgd2','buss/indexgd2.html')">
						<span style="position: relative;">
							<span v-if="gongdanNum" class="mui-badge mui-badge-success icon_position">{{gongdanNum}}</span>
							<img src="../images/index/look_gongdan.png" style="width:30px;height: 33px;">
						</span>
						<div class="gray_color">待处理工单</div>
					</div>
					<span style="border:0.1px solid #CCCCCC;height: 50px;"></span>
					<div style="flex: 1;text-align: center;" @click="defOpenWindow('xunjian','buss/xunjian.html')">
						<span style="position: relative;">
							<span v-if="xunjiannNum" class="mui-badge mui-badge-success icon_position" style="right: -15px;">{{xunjiannNum}}</span>
							<img  src="../images/index/look_xunjian.png" style="width:30px;height: 33px;">
						</span>
						<div class="gray_color">待执行巡检</div>
					</div>
					<span style="border:0.1px solid #CCCCCC;height: 50px;"></span>
					<div style="flex: 1;text-align: center;" @click="defOpenWindow('warning_record','buss/warning_record.html')">
						<span style="position: relative;">
							<span v-if="warningRecordNum" class="mui-badge mui-badge-success icon_position " style="right: -7px;">{{warningRecordNum}}</span>
							<img  src="../images/index/look_warning.png" style="width:33px;height: 33px;">
						</span>
						<div class="gray_color">待查看告警</div>
					</div>
				</div>
				
				<!-- 浇灌&&智能控制 -->
				<div style="display: flex;">
					<div  class="block_common" style="flex: 1;margin-right: 0px;font-size: 16px;padding-top: 22px;">
						<img src="../images/index/jiaoguan.png" style="width:20px;vertical-align: bottom;"> 
						共<span class="green_color" @click="defOpenWindow('tiankuai','buss/tiankuai.html')"> {{farmlandNum||0}} </span>个田地正在浇灌
					</div>	
					<div  class="block_common" style="width: 120px;font-size: 16px;"  @click="defOpenWindow('tiankuai','buss/tiankuai.html')">
						<img src="../images/index/yaokong.png" style="width:15px;vertical-align: -8px;"> 
						智能控制
					</div>	
				</div>
				
				<!-- 公告&&直击现场 -->
				<div style="display: flex;">
					<div  class="block_common width_beyond" style="flex: 1;margin-right: 0px;height: 120px;padding:10px 5px">
						<div v-for="item in noticeList"  @click="defOpenWindow('public_notice','buss/public_notice.html')"
							class="width_beyond gray_color" style="line-height: 25px;"><span class="green_color">【通知】</span>{{item.name}}</div>
					</div>	
					<div  class="block_common" style="width: 120px;height: 120px;  background-image: url(../images/index/xianchagn_bg.png);
						background-size: 100% 100%; text-align: center;" @click="defOpenWindow('tiankuai','buss/tiankuai.html')">
						<img src="../images/index/xianchang_bg2.png" style="width:80px">
					</div>	
				</div>
			</div>
		</div>
		
		<script type="text/javascript" charset="utf-8">
			
			var vm = new Vue({
				el:"#app",
				data:{
					warningRecordList:[],
					warningRecordNum:"",
					gongdanNum:"",
					xunjiannNum:"",
					noticeList:[],
					farmlandNum:""
					
				},
				methods:{
					init(){
						mui.init({
							statusBarBackground: '#f7f7f7',
							swipeBack:true //启用右滑关闭功能
						});
						
						mui.plusReady(function() {  
							var wv = plus.webview.currentWebview();  
							wv.setStyle({  
								top:"0px",
								titleNView: {  
									type:"transparent",
									autoBackButton:false,
									titleText: '永修高标准农田' ,
									// backgroundcolor: "#2dbb55",
									// titlecolor: "#fff"
								}  
							})  
						})
						  
						var slider = mui("#slider");
						slider.slider({
							interval: 3000
						});
						
					},
					// 获取告警信息
					getWarningRecordList(){
						var vmObj = this;
						mui.getJSON(baseUrl+"/buss/bussrtuwarningrecord/list",{"page":1,"limit":10},function(r){
							if (r.code == 0) { //登录成功
								vmObj.warningRecordList = r.page.list;
								vmObj.warningRecordNum = r.page.totalCount;
							}else{
								mui.toast(r.msg, {
									icon: 0
								}, {
									duration: 'long',
									type: 'div'
								})
							}
						});
					},
					// 获取工单数量
					getGongdanNum(){
						var vmObj = this;
						mui.getJSON(baseUrl+"/buss/bussmaintaintask/list",{"page":1,"limit":1,'isMe':true},function(r){
							if (r.code == 0) { //登录成功
								vmObj.gongdanNum = r.page.totalCount;
							}else{
								mui.toast(r.msg, {
									icon: 0
								}, {
									duration: 'long',
									type: 'div'
								})
							}
						});
					},
					// 获取巡检数量
					getXunjianNum(){
						var vmObj = this;
						mui.getJSON(baseUrl+"/buss/bussinspectiontask/list",{"page":1,"limit":1,'isMe':true},function(r){
							if (r.code == 0) { //登录成功
								vmObj.xunjiannNum = r.page.totalCount;
							}else{
								mui.toast(r.msg, {
									icon: 0
								}, {
									duration: 'long',
									type: 'div'
								})
							}
						});
					},
					// 获取通知公告信息
					getNoticeList(){
						var vmObj = this;
						mui.getJSON(baseUrl+"/buss/busspublicnotice/list",{"page":1,"limit":4},function(r){
							if (r.code == 0) { //登录成功
								vmObj.noticeList = r.page.list;
							}else{
								mui.toast(r.msg, {
									icon: 0
								}, {
									duration: 'long',
									type: 'div'
								})
							}
						});
					},
					// 获取田块数量
					getFarmlandNum(){
						var vmObj = this;
						mui.getJSON(baseUrl+"/buss/bussfarmlandinfo/list",{"page":1,"limit":1},function(r){
							if (r.code == 0) { //登录成功
								vmObj.farmlandNum = r.page.totalCount;
							}else{
								mui.toast(r.msg, {
									icon: 0
								}, {
									duration: 'long',
									type: 'div'
								})
							}
						});
					},
					
				},
				created(){
						
					this.getWarningRecordList();
					this.getGongdanNum();
					this.getXunjianNum();
					this.getNoticeList();
					this.getFarmlandNum();
				},
				mounted(){
					this.init();
				}
			});		
		</script>
	</body>
</html>
